<template>
  <div class="lifecycle-emission-distribution-chart-container" ref="pieChartRef"></div>
</template>

<script lang="ts" setup name="LifecycleEmissionDistributionChart">
import { ref, defineExpose, defineProps, onMounted } from 'vue';
import { useECharts } from '@/hooks/useECharts';
import { ProcessStageMap } from '@/constants/pcf';
import type { GetModelLifecycleEmissionResult } from '@/apis/pcf/pcfForm/model/pcfFormModel';
import Decimal from 'decimal.js';
import { tofixed, justRenderResultUnit } from '@/utils';
interface LifecycleEmissionDistributionChartProps {
  emissionData: GetModelLifecycleEmissionResult[];
}
const props = defineProps<LifecycleEmissionDistributionChartProps>();
const pieChartRef = ref();
const { setOptions } = useECharts(pieChartRef);

const maxValue = ref(0);
const seriesList = ref<any[]>([]);

const colorList = ['#2E8BAD', '#F5C770', '#D77359', '#656BA5', '#03AC82'];
const init = () => {
  seriesList.value = [];
  let max = 0;
  // 处理初始化数据
  for (let i = 0; i < props.emissionData.length; i++) {
    const item = props.emissionData[i];
    max += item.emission;
    // 占比 --- eg:92.92
    const rate = tofixed(Decimal.mul(item.proportion || 0, 100).toNumber(), 2);
    // 是否展示label --- 占比小于 5% 隐藏
    const flag = !((rate as number) <= 5);
    seriesList.value.push({
      name: ProcessStageMap[item.lifeCycleStage],
      type: 'bar',
      stack: 'value',
      barWidth: 28,
      label: {
        show: flag,
        color: '#fff'
      },
      emphasis: {
        focus: 'series'
      },
      data: [
        {
          value: parseFloat(item?.emission.toFixed(3)),
          originalValue: item.emission,
          rate
          // rate: tofixed(Decimal.mul(item.proportion || 0, 100).toNumber(), 2)
        }
      ]
    });
  }
  maxValue.value = max;
  let option: any = {
    color: colorList,
    tooltip: {
      appendToBody: true,
      trigger: 'item',
      axisPointer: {
        // Use axis to trigger tooltip
        type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
      },
      formatter: function (params: any) {
        const { seriesName, color, data } = params;
        let str =
          "<span style='margin-right: 4px;display:inline-block;width:15px;height:10px;border-radius:3px;background-color:" +
          color +
          ";'></span>" +
          `<span style='font-weight: 600;'>${seriesName}</span>` +
          '<br/>';

        str += `<span>碳排量：${data.value}kg CO₂e</span><br /><span>占比：${data.rate}%</span>`;
        return str;
      }
    },
    legend: {
      x: 'center',
      bottom: '20'
    },
    grid: {
      top: 0,
      left: 0,
      right: 0,
      bottom: '20',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      max: function (value: { min: number; max: number }) {
        return value.max;
      },
      show: false
    },
    yAxis: {
      type: 'category',
      show: false
    },
    series: seriesList.value
  };

  return option;
};

// onMounted(() => {
//   renderChart();
// });

function renderChart() {
  const option = init();
  setOptions(option);
}

defineExpose({
  renderChart
});
</script>

<style lang="scss" scoped>
.lifecycle-emission-distribution-chart-container {
  padding: 0 22px 0 5px;
  width: 100%;
  height: 92px;
}
</style>
